<template>
	<div>
		<custom-header :title="title" ref="customHeader" :hideRight="false"></custom-header>
		<div class="avatar-info">
			<img :src="avatarUrl" class="avatar" @click="previewAvatar">
			<div class="info">
				<div class="unum">
					<span>用户名:</span>{{UserName}}
				</div>
				<div class="uname">
					<span>姓 &nbsp;&nbsp;名:</span>{{DisplayName}}
				</div>
			</div>
			<div class="edit">
				<van-uploader ref="fileListRef" v-model="fileList" :before-read="beforeRead" :after-read="afterRead" :preview-full-image="false" :deletable="false" :max-count="1">
					<div class="edit-cont" @click="editAvatar">
						<span>修改头像</span>
						<img src="@/static/userinfo/arrow-go-white.png" class="arrow-edit">
					</div>
				</van-uploader>
			</div>
		</div>
		<div class="other-detail">
			<div class="password">
				<span class="pwd-title">密码</span>
				<div class="btn-edit-pwd" @click="editPwd">
					修改密码 <image src="@/static/userinfo/arrow-go-blue.png" class="edit-pwd"></image>
				</div>
			</div>
			<div class="email">
				<span>邮箱</span>
				<van-field v-model="Email" name="Email" placeholder="请输入邮箱" input-align="right">
				</van-field>
			</div>
			<div class="mobile">
				<span>手机号</span> {{Mobile}}
			</div>
			<div class="address">
				<span>地址</span>
				<van-field v-model="Address" rows="2" type="textarea" name="Address" placeholder="请输入地址" input-align="right">
				</van-field>
			</div>
			<div class="desc">
				<span>个人简介</span>
				<van-field v-model="Remark" rows="3" type="textarea" name="Remark" placeholder="请输入个人简介" input-align="right">
				</van-field>
			</div>
		</div>

		<div class="logout" @click="logout">
			退出登录
		</div>

		<div class="confirm" @click="saveInfo">
			确认
		</div>
	</div>
</template>

<script>
import customHeader from "@/components/custom-header.vue";
import { ImagePreview } from "vant";
import axios from "axios";
export default {
	components: {
		customHeader,
	},
	data() {
		return {
			title: "个人信息",
			avatarUrl: "",
			UserName: "",
			DisplayName: "",
			Email: "",
			Mobile: "",
			Address: "",
			Remark: "",
			fileList: [],
		};
	},
	created() {
		this.getUserDetail();
	},
	methods: {
		previewAvatar() {
			// uni.previewImage({
			// 	urls: [this.avatarUrl]
			// })
			ImagePreview({
				images: [this.avatarUrl],
				showIndex: false,
			});
		},
		saveInfo() {
			this.$api.user
				.saveUserInfo({
					email: this.Email,
					mobile: this.Mobile,
					address: this.Address,
					remark: this.Remark,
				})
				.then((res) => {
					if (res.code > 0) {
						this.$msg.success(res.msg);
						this.getUserDetail();
					} else {
						this.$msg.fail(res.msg);
					}
				});
		},
		getUserDetail() {
			this.$api.user.userInfo().then((res) => {
				this.avatarUrl = res.avatarUrl;
				this.UserName = res.user.UserName;
				this.DisplayName = res.user.DisplayName;
				this.Email = res.user.Email;
				this.Mobile = res.user.Mobile;
				this.Address = res.user.Address;
				this.Remark = res.user.Remark;
			});
		},
		toResetPassword() {},
		logout() {
			this.$msg
				.confirm("确认退出登录?", true)
				.then(() => {
					this.$api.user.userInfo().then((res) => {
						if (res.code > 0) {
							this.$router.push({
								name: "login",
							});
							this.$msg.alert("已退出登录");
						}
					});
				})
				.catch(() => {
					this.$msg.inform("已取消退出登录");
				});
		},
		editAvatar() {
			// var that = this
			// uni.chooseImage({
			// 	// count: 6, //默认9
			// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 	sourceType: ['album'], //从相册选择
			// 	success: function(res) {
			// 		console.log(res);
			// 		// that.$http.upload('https://upload.icve.com.cn', {
			// 		// 	space: 'ssykt',
			// 		// 	time: '637879511072184921',
			// 		// 	bucket: 'icve',
			// 		// 	token: '406941D043821D34FC2512C8CF40CB1D',
			// 		// 	extension: 'png',
			// 		// 	encode: 'base64'
			// 		// }).then(res => {
			// 		// })
			// 	}
			// });

			// uni.chooseImage({
			// 	success: (chooseImageRes) => {
			// 		const tempFilePaths = chooseImageRes.tempFilePaths;
			// 		uni.uploadFile({
			// 			url: 'https://upload.icve.com.cn', //仅为示例，非真实的接口地址
			// 			filePath: tempFilePaths[0],
			// 			name: 'file',
			// 			formData: {
			// 				space: 'ssykt',
			// 				time: '637879511072184921',
			// 				bucket: 'icve',
			// 				token: '406941D043821D34FC2512C8CF40CB1D',
			// 				extension: 'png',
			// 				encode: 'base64'
			// 			},
			// 			success: (uploadFileRes) => {
			// 				console.log(uploadFileRes.data);
			// 			}
			// 		});
			// 	}
			// });
			this.$refs.uploadImg.chooseFile();
		},
		afterRead(file) {
			window.console.log("after", file);
		},
		beforeRead(file) {
			window.console.log("before", Date.now());

			let data = {
				space: "ssykt",
				time: Date.now(),
				bucket: "icve",
				token: "7FA694FB69A8339772E475F1C98A362A",
				extension: "png",
				encode: "base64",
			};

			var formData = new FormData();
			//e.target.files 获取fileList对象里的上传的file对象添加到formData里面
			formData.append("space", "ssykt");
			formData.append("time", Date.now());
			formData.append("bucket", "icve");
			formData.append("token", "7FA694FB69A8339772E475F1C98A362A");
			formData.append("extension", "png");
			formData.append("encode", "base64");
			axios("https://upload.icve.com.cn", formData, {
				//设置请求头
				method: "post",
				headers: { "Content-Type": "multipart/form-data" },
			}).then((res) => {
				window.console.log(res);
			});

			// this.$http.user.uploadAvatar(data).then((res) => {
			// 	window.console.log(res);
			// });

			// this.$http
			// 	.get("/api/common/accounts/saveAvatar", {
			// 		params: {
			// 			avatarUrl: file,
			// 		},
			// 	})
			// 	.then((data) => {
			// 		if (data.code === 1) {
			// 			this.$message.success(data.msg);
			// 			setTimeout(() => {
			// 				this.$router.go(0);
			// 			}, 500);
			// 		}
			// 	});
		},
		editPwd() {
			// uni.navigateTo({
			// 	url: '/pages/updatePassword/updatePassword'
			// })
			this.$router.push({
				name:'updatePwd'
			})
		},
	},
};
</script>

<style lang="less" scoped>
@import "index.less";
</style>
